<template>
  <div id="my-charts">
    <div id="my_bar_chart" style="width: 1200px; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listRooms } from "@/api/system/building";

export default {
  name: "listRooms",
  data() {
    return {
      barChart: null,
      queryParameter: {}
    };
  },
  mounted() {
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.init();
    this.fetchRoomsData();
  },
  methods: {
    init() {
      this.barChart.setOption({
        title: {
          x: 'center',
          text: "楼宇房间数统计表",
          textStyle: {
            color: "black",
            fontSize: 20,
            fontStyle: "italic",
            fontWeight: "bold",
          },
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20
          },
          data: []
        },
        yAxis: {
          axisLabel: {
            show: true
          }
        },
        graphic: [
          {
            type: 'text',
            left: '0',
            top: '25',
            z: 100,
            style: {
              text: '房间数',
              fill: '#333',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: "访问来源",
            type: "bar",
            data: []
          }
        ]
      });
    },
    async fetchRoomsData() {
      listRooms(this.queryParameter).then(res => {
        let dataList = [];
        const xAxisData = [];
        const yAxisData = [];

        for (let i = 0; i < res.length; i++) {
          let o = new Object();
          o.name = res[i].name;
          o.value = res[i].roomCount;
          dataList[i] = o;
          xAxisData.push(res[i].name); // 将x轴的数据添加到xAxisData数组中
        }

        this.barChart.setOption({
          xAxis: {
            data: xAxisData, // xAxisData为x轴的数据
          },
          series: [
            {
              data: dataList
            }
          ]
        });
      });
    }
  }
};
</script>
